<!--管理员查看用户-->
<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/managerMain' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>查看用户</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 返回顶部-->
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    <!--用户表格-->
    <el-table :data="userTable"  align="center" stripe >
      <el-table-column type="index"  label="序号" width="100" align="center"></el-table-column>
      <el-table-column prop="uname" label="用户名" width="250" align="center"></el-table-column>
      <el-table-column prop="pwd" label="用户密码" width="300" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <temple slot-scope="scope">
          <el-button type="success"  round @click="clickModify(scope.row.uname)" style="margin-right:10px">修改密码 <i class="el-icon-edit"></i></el-button>
          <template>
            <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定注销此用户？" @confirm="deletebyUname(scope.row.uname)">
            <el-button slot="reference" type="warning"  round>注销<i class="el-icon-delete"></i></el-button>
            </el-popconfirm>
          </template>
          <!--修改密码嵌套-->
          <el-dialog title="修改密码" :visible.sync="dialogTableVisible" style="width:1100px;height:500px">
            <el-form :model="form" style="width:400px">
              <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="newPwd" placeholder="请输入修改后的密码" show-password prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" :label-width="formLabelWidth">
                <el-input v-model="newPwd_" placeholder="请再次输入修改后的密码" show-password prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="clear">取 消</el-button>
              <el-button type="primary" @click="modifyPwd">确 定</el-button>
            </div>
          </el-dialog>
        </temple>
      </el-table-column>
    </el-table>
    <!--分页功能-->
    <div style="margin-top:20px;">
      <h>共{{total}}条</h>
    </div>
  </div>
</template>

<script>
export default {
  name: "userManage",
  data() {
    return {
      //分页查询变量
      total: 0,
      //表格变量
      userTable:[],//存放用户信息
      //对话框visible
      dialogFormVisible: false,
      //需要修改密码的用户名，缓存
      unameM:'',
      newPwd:'',
      newPwd_:'',
      //修改密码输入框的宽度
      formLabelWidth: '100px',
      dialogTableVisible: false,
      //页面装饰变量
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods:{
    //加载页面
    load() {
      this.$axios.get('http://localhost:9090/user/')
        .then(res =>{
          console.log(res.data);
          if(res.data.code=="200")
          //赋值
          {this.userTable=res.data.data;
          this.total=this.userTable.length;}
          else
          {
            this.$message({
							message:res.data.msg,
							type:'error'
							});
          }
        })
    },
    //保存需要修改密码的用户名
    clickModify(uname){
      this.dialogTableVisible=true;
      this.unameM=uname;
      console.log(this.unameM);
    },
    //修改密码
    modifyPwd(){
      //两次输入的新密码相同，并且不为空
      if(this.newPwd==this.newPwd_&&this.newPwd!='')
      {
        this.dialogTableVisible=false;
        console.log(this.unameM);
        console.log(this.newPwd);
        this.$axios.post('http://localhost:9090/user/updatepwd', {
							 uname:this.unameM,
						  	pwd:this.newPwd
							})
							.then(res => {
						  		if (res.data.code === "200") 
								{
											this.$message({
												message:"修改成功",
												type:'success'
											});
                      //修改成功后，更新页面
                      this.load();
                      //清空记录
                      this.clear();
						  		}
								else
								{
									this.$message({
									message:res.data.msg,
									type:'error'
									});
								}
						})
      }
      else if(this.newPwd!=this.newPwd_){
        this.newPwd_='';
        this.$message({
          message:"请保持两次输入密码一致！",
          type:'warning'
        })
      }
      else{
        this.$message({
          message:"请输入新密码！",
          type:'warning'
        })
      }
    },
    //注销
    deletebyUname(uname)
    {
      this.$axios.delete(`http://localhost:9090/user/${uname}`,{uname:uname})
      .then(res=>{
        if(res.data.code==="200")
        {
          this.$message({
												message:"注销成功",
												type:'success'
											});
          this.load();
        }
        else{
          	this.$message({
									message:res.data.msg,
									type:'error'
									});
        }
      })
    },
    //取消
    clear()
    {
      //清空所有记录
      this.unameM=this.newPwd=this.newPwd_='';
      this.dialogTableVisible=false;
      console.log(this.unameM);
      console.log(this.newPwd);
    }
  }
}
</script>

<style>
.headerBg {
  background-color: #cccccc!important;
}
.el-header {
  height: 70px !important;
}
.bread{
	margin-bottom: 20px;
}

.el-breadcrumb  /deep/  .el-breadcrumb__inner 
      {
        font-size: 30;			
    }
</style>
